<script setup>
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import {getList as ListRest} from "@/boot/rest.js";
import {getList as ListComment,addOne as AddComment} from "@/boot/comment.js";
import {addOne as AddCollection} from "@/boot/collection.js";
import {ElMessage} from "element-plus";

const route = useRoute()
const id = route.query.id
const detail = ref([])
const comment1 = ref([])
const comment2 = ref([])
const comment = ref([])
const content = ref('')
onMounted(()=>{
  const res1 = ListRest({id:id}).then(res=>{
    detail.value = res.data.data[0]
    comment1.value = JSON.parse(res.data.data[0].comment)
  })
  const res2 = ListComment({restId:id}).then(res=>{
    comment2.value = res.data.data

  })
  const res = Promise.all([res1,res2])
  res.then(res=>{
    comment.value = comment1.value.concat(comment2.value)
  })
})
const submitCollection = () => {
  let userId = localStorage.getItem('userId')
  AddCollection({restId:id,userId:userId}).then(res=>{
    if(res.data.code === 200){
      ElMessage.success('收藏成功')
    }
  })
}
const submitComment = () => {
  let userId = localStorage.getItem('userId')
  AddComment({restId:id,content:content.value,userId:userId}).then(res=>{
    if(res.data.code === 200){
      ElMessage.success('评论成功')
      comment2.value.push({content:content.value})
    }
  })
}

</script>

<template>
<div class="w-full h-full">
  <div class="flex w-2/3 m-auto ">
    <div class="flex-1">
      <div class="w-64 h-64 bg-gray-200 rounded-full flex items-center justify-center">
        <img :src="detail.picUrl" class="w-64 h-64 rounded-full" alt="rest image">
      </div>
    </div>
    <div class="flex-1">
      <div class="mt-4">
        <h1 class="text-2xl font-bold">{{detail.name}}</h1>
        <div class="flex  gap-5">
          <el-tag >{{detail.foodType}}</el-tag>
          |
          <el-tag >{{detail.location}}</el-tag>
        </div>
        <div class="mt-5">
          <el-icon @click="submitCollection" class="text-3xl text-blue-500 hover:cursor-pointer "><Star /></el-icon>
        </div>
      </div>
    </div>
  </div>
  <div class="w-2/3 m-auto mt-10">
    <div class="text-2xl font-bold">评论</div>
    <div class="mt-5">
      <el-card>
          <template #header>
            <div class="text-lg font-bold">请输入评论</div>
          </template>
        <el-input type="textarea" :rows="4" v-model="content" placeholder="请输入评论" clearable></el-input>
        <div class="mt-5">
          <el-button type="primary" @click="submitComment">提交</el-button>
        </div>
      </el-card>
    </div>
    <div class="mt-5">
      <div v-for="item in comment2" class="mt-5">
        <el-card>
          <div class="text-lg font-bold">用户</div>
          <div class="mt-3">{{item.content}}</div>
        </el-card>
      </div>
      <div v-for="item in comment1" class="mt-5">
        <el-card>
          <div class="text-lg font-bold">大众点评</div>
          <div class="mt-3">{{item}}</div>
        </el-card>
      </div>

    </div>
  </div>


</div>
</template>

<style scoped>

</style>